<div class="LoginRegisterHeader">
  <div class="BackBtn">
    <a href="javascript:void(0)" onclick="ok()"
      ><img src="__CDN__/map/images/return.png" alt="返回"
    /></a>
  </div>
  <div class="LoginRegisterHeaderTitle">登录</div>
</div>

<div class="LoginRegisterMian LoginBg">
  <div class="LoginParentBox">
    <div class="LoginBox">
      <div class="LoginBoxTitle">用户登录</div>
      <!--<form method="POST" >-->
      <input type="hidden" name="url" value="{$url}" />
      {:token()}
      <div class="LoginBoxInput" id="account1">
        <input
          data-flag="0"
          data-reg="^1[34578]\d{9}$"
          type="text"
          autocomplete="off"
          value=""
          name="account"
          placeholder="请输入您的手机号"
        />
        <span>您所输入的号码有误，请重新输入</span>
      </div>
      <div class="LoginBoxInput" id="password1">
        <input
          data-flag="0"
          data-reg="^[a-zA-Z0-9]{1,16}$"
          autocomplete="off"
          type="password"
          value=""
          name="password"
          placeholder="请输入您的密码"
        />
        <span>请输入密码</span>
      </div>
      <div class="LoginBoxBtn">
        <input disabled class="" id="submit" type="button" value="登录" />
      </div>
      <!--</form>-->
    </div>
  </div>
  <div class="LoginTip am-cf">
    <a class="am-fl" href="{:url('user/backpwd')}">忘记密码？</a>
    <a class="am-fr" href="{:url('user/register')}"
      >没账号 <span class="dmColor">立即注册</span>
    </a>
  </div>
</div>

<style>
  .account1 {
    border-bottom: 2px solid #fc311e;
  }
  .gradualBg1 {
    background: linear-gradient(to right, #807973, #807973) !important;
  }
  /*新增样式*/
  .LoginBoxInput {
    overflow: visible !important;
  }
  .LoginBoxInput span {
    color: red;
    display: none;
  }
</style>
<script>
  function ok() {
    window.location.href = "{:url('/')}"
  }
  function vailPhone(account) {
    var flag = false
    var message = ""
    var myreg = /^(((13[0-9]{1})|(18[0-9]{1})|(14[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(19[8]{1})|(19[9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
    if (account == "") {
      message = "手机号码不能为空！"
    } else if (account.length != 11) {
      message = "请输入有效的11位手机号码！"
    } else if (!myreg.test(account)) {
      message = "请输入有效的手机号码！"
    } else {
      flag = true
    }
    if (flag == false) {
      alert(message)
    }

    return flag
  }
  var http_url = "{$http_url}"
  $("#submit").on("click", function() {
    var account = $("input[name='account']").val()
    var password = $("input[name='password']").val()
    var token = $("input[name='__token__']").val()
    if (!vailPhone(account)) {
      $("#account1").addClass("account1")
      return false
    } else {
      $("#account1").removeClass("account1")
    }

    if (password.length < 6) {
      alert("必须是6到16位数字加字母")
      $("#password1").addClass("account1")
      return false
    } else if (password.length > 16) {
      alert("必须是8到16位数字加字母")
      $("#password1").addClass("account1")
      return false
    } else {
      $("#password1").removeClass("account1")
    }

    $.ajax({
      type: "POST",
      url: "{$http_url}/index/user/login",
      dataType: "json",
      data: {
        account: account,
        password: password,
        __token__: token
      },
      success: function(data) {
        if (data.code > 0) {
          window.location.href = http_url + data.url
        } else {
          $("input[name='__token__']").val(data.token)
          if (data.msg == "账号输入有误") {
            $("#account1").addClass("account1")
          } else if (data.msg == "账号或密码不能为空") {
            $("#password1").addClass("account1")
          } else if (data.msg == "密码错误") {
            $("#password1").addClass("account1")
          } else if (data.msg == "该账号还没有注册") {
            $("#account1").addClass("account1")
          }
          alert(data.msg)
        }
      },
      error: function(jqXHR) {
        console.log("Error: " + jqXHR.status)
      }
    })
  })
  //2019-3-20
  //监听用户输入
  $(".LoginBoxInput").on("blur", "input", function() {
    let val = $(this).val(),
      reg = new RegExp($(this).attr("data-reg"))
    if (!reg.test(val)) {
      $(this)
        .next()
        .show()
      setTimeout(() => {
        $(this)
          .next()
          .hide()
      }, 5000)
    } else {
      $(this)
        .next()
        .hide()
    }
  })
  //监听输入都正确允许用户点击
  $(".LoginBoxInput").on("input", "input", function() {
    let val = $(this).val(),
      reg = new RegExp($(this).attr("data-reg"))
    if (!reg.test(val)) {
      $(this).attr("data-flag", "0")
    } else {
      $(this).attr("data-flag", "1")
    }
    if (
      $("[type=text]").attr("data-flag") == 1 &&
      $("[type=password]").attr("data-flag") == 1
    ) {
      $("#submit")
        .attr("disabled", false)
        .addClass("gradualBg")
    } else {
      $("#submit")
        .attr("disabled", true)
        .removeClass("gradualBg")
    }
  })
</script>
